<html>
    <head>
        <script id="polyfill">
            if (!String.prototype.startsWith) {
  String.prototype.startsWith = function(searchString, position) {
    position = position || 0;
    return this.indexOf(searchString, position) === position;
  };
}
        </script>
        <link rel="stylesheet" type="text/css" href="css/flame.css"/>
        <script src="js/jquery-3.7.1.min.js"></script>
        <script id="debug_out">
            function debug(text) {
                $("<p></p>").text(text).prependTo("#debug_console");
            }
        </script>
        <script src="js/flamer-model.js"></script>
        <script src="js/flamer-filter-popup.js"></script>
        <script src="js/flamer-filter-threads.js"></script>
        <script src="js/flamer-filter-states.js"></script>
        <script src="js/flamer-graph.js"></script>
        <script src="js/flamer-controller.js"></script>

        <script src="../../test/resources/js/dummy_data_tiny.js"></script>
        <script>
            $(document).ready(function() {createFlameChart("fg1", data).initFlameChart()});
        </script>
    </head>
    <body>
        <div id="fg1" class="flameFrame">
            <div class="flameHover" style="display: none">This is flame hover</div>
            <div style="display: flex; flex-direction: row; justify-content: space-between">
                <div class='credit'>Created with <a href="https://github.com/aragozin/jvm-tools">SJK</a></div>
                <div class="flameStateFilter" style="position: relative">
                    <a class="btn" style="display: none">states</a>
                    <div class="panel" style="display: none">---</div>
                </div>
                <div class="flameThreadFilter" style="position: relative">
                    <a class="btn" style="display: none">thread</a>
                    <div class="panel" style="display: none">---</div>
                </div>
            </div>
            <div class="flameArea">
                <div class="flameRoot">
                    <div style="display: flex; flex-direction: column">
                    <div style="align-self: center; font-size: 2em; padding-left: 1.5em;">Flame chart is loading ...</div>
                    <div style="align-self: center">You need JavaScript enbaled for flame chart to function</div>
                    <div style="align-self: center">It may take couple of minutes</div>
                    </div>
                    <div style="min-height: 15em"></div>
                </div>
            </div>
        </div>
        <script id="importflame_fg1">/* template placeholder*/</script>
        <div id="debug_console">
        </div>
    </body>
</html>
